<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="closeOnClickModal" :before-close="handleClose" :visible.sync="isShow" :title="title" width="65%">

    <!-- 自定义分页表格组件 -->
    <page-table
      ref="table"
      :columns="columns"
      :url="url"
      :param="param"
      @searchSuccess="searchSuccess"
      @add="add"
      @edit="edit"
    ><!--add, edit 方法为操作按钮一实现时所需绑定的操作-->

      <!-- 插槽定义方式 -->
      <template slot="contact" slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>

      <!-- 操作方法定义第二种方式 -->
      <el-table-column slot="action" align="center" label="操作2" width="150" :resizable="false">
        <template slot-scope="scope">
          <el-button class="edit-bgc" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
        </template>
      </el-table-column>

    </page-table>

    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="onSearch()">查询</el-button>
      <el-button type="text" @click="handleClose">取消</el-button>
      <el-button :loading="loading" type="primary" @click="handleOk">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>

import pageTable from '@/components/PageTable/commonTable'

function formatter(row, column, cellValue) { // 自定义展示属性
  return 'hello ' + row.name
}

export default {
  components: {
    pageTable
  },
  props: {
    title: {
      type: String,
      required: true
    },
    isShow: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      url: 'api/Supplier', // 请求路径
      param: {}, // 请求参数
      loading: false,
      columns: [
        { // 普通使用方式
          label: '姓名',
          prop: 'name',
          width: '200', // 宽度
          showOverflowTooltip: false, // 当内容过长被隐藏时显示tooltip , 也可存在表格组件上, 若组件上有则以组件为准
          align: 'center' // 显示位置, left, right, center, 默认center
        },
        { // 自定义展示数据
          label: '用户昵称',
          prop: 'wechatUserNickname',
          align: 'center',
          formatter: formatter // 数据初始化方法
        },
        { // 插槽使用方式
          label: '联系人',
          prop: 'contact', // 属性名, 也是插槽名
          align: 'center',
          slot: true // 开启插槽
        },
        {
          label: '操作1', // 第一种操作按钮实现方式
          action: true, // 开启方法
          actions: [ // ps: 这种方式需要在table标签中 @xxx='xxx' 添加对应的方法
            {
              fnName: 'add',
              title: '新增',
              type: 'text' // button类型, 详情参见文档 默认text
            },
            {
              fnName: 'edit',
              title: '编辑',
              type: 'primary',
              size: 'mini' // button大小, 详情参见文档 默认mini
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    handleOk() {
      this.$emit('handleOk')
    },
    searchSuccess(data) {
      console.log(data)
    },
    onSearch(page) {
      const that = this
      setTimeout(function() {
        that.$refs.table.handleSearch(page)
      }, 0)
    },
    add(e) {
      console.log('新增：' + e.name)
    },
    edit(e) {
      console.log('编辑：' + e.name)
    }
  }
}
</script>

<style scoped>
  .el-divider--horizontal{
    margin: 5px 0;
  }
</style>
